<template>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <i class="el-icon-s-unfold" @click="isShow=!isShow" style="color:white">   菜单1</i>
      <v-header1></v-header1>
    </el-header>

    <el-container>

      <!-- 侧边栏 -->
      <el-aside width="200px"  v-if="isShow">
        <v-aside></v-aside>
      </el-aside>

      <el-container @click="isShow=false">

        <!-- 主页 -->
        <el-main>
          <router-view></router-view>
        </el-main>

        <!-- 底部 -->
        <!-- <el-footer>
        </el-footer> -->
      </el-container>

    </el-container>
  </el-container>
</template>
<style>
.el-icon-s-unfold {
  float: left;
  margin: 20px 20px;
}
.el-aside{
  background-color: #DCDFE6;
}
</style>

<script>
import vUser from "../pages/user/user.vue";
import vHeader1 from "./Header1.vue";
import vAside from "./Aside.vue";
export default {
  components: {
    vUser,
    vHeader1,
    vAside
  },
  data() {
    return {
      isShow: true
    };
  },
};
</script>